<form nz-form [nzLayout]="'inline'" class="ant-advanced-search-form">
  <nz-form-item>
    <nz-form-label>{{l("warehouse_company_name")}}</nz-form-label>
    <nz-form-control>
      <input type="text" [(ngModel)]="keyword" [ngModelOptions]="{standalone: true}" nz-input
        [placeholder]="l('please_enter_warehousing_company')">
    </nz-form-control>
  </nz-form-item>
  <nz-form-item class="control-area">
    <button nz-button [nzType]="'primary'" (click)="load()">{{l('search')}}</button>
    <button nz-button (click)="reset()">{{l('reset')}}</button>
  </nz-form-item>
</form>

<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i>{{l('create')}}
  </button>
  <button nz-button nzType="primary" (click)="fileSelect.click()"><i
      class="anticon anticon-cloud-upload-o"></i>{{l("batch_import")}}
  </button>
  <input #fileSelect type="file" ng2FileSelect [uploader]="uploader" style="display:none" />
</div>


<nz-table #ajaxTable nzShowSizeChanger nzBordered [nzScroll]="{x:'1300px'}" [nzFrontPagination]="false"
  [nzData]="tableHelper.items" [nzLoading]="tableHelper.loading" [nzTotal]="tableHelper.totalCount"
  [(nzPageIndex)]="tableHelper.pageIndex" [nzShowTotal]="totalTemplate" [(nzPageSize)]="tableHelper.pageSize"
  (nzPageIndexChange)="load()" (nzPageSizeChange)="load()">
  <thead>
    <tr>
      <th nzWidth="70px" nzLeft="0px">{{l('serial_number')}}</th>
      <th nzWidth="150px" nzLeft="70px">{{l('warehousing_company_name')}}</th>
      <!-- <th>{{l('warehousing_company_address')}}</th> -->
      <th>{{l('site_alone')}}</th>
      <th>{{l('warehousing_company_manager')}}</th>
      <th>{{l('manager_phone')}}</th>
      <th>{{l('warehousing_company_contact')}}</th>
      <th>{{l('view_address')}}</th>
      <th>{{l('remark')}}</th>
      <th nzWidth="140px" nzRight="0px">{{l('operation')}}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of ajaxTable.data;let i = index">
      <td nzLeft="0px">{{i++1}}</td>
      <td nzLeft="70px">{{data.houseName}}</td>
      <!-- <td>{{data.address}}</td> -->
      <td>{{data.siteName}}</td>
      <td>{{data.managerName}}</td>
      <td>{{data.managerPhone}}</td>
      <td>{{data.housePhone}}</td>

      <td><a (click)="showMap(data)">{{l('view_address')}}</a></td>
      <td>{{data.reason}}</td>
      <td nzRight="0px">
        <a (click)="showModal(data.id)">{{l('edit')}}</a>
        <nz-divider nzType="vertical"></nz-divider>
        <a (click)="handleUsing(data)" *ngIf="!data.enableFlag">{{l('enable')}}</a>
        <a (click)="handleUsing(data)" *ngIf="data.enableFlag">{{l('disenable')}}</a>
      </td>
    </tr>
  </tbody>
</nz-table>
<ng-template #totalTemplate let-total>
  {{l('total')}} {{total}} {{l('items')}}
</ng-template>

<nz-modal [nzWidth]="700" [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()"
  (nzOnOk)="handleOk()" [nzOkLoading]="isOkLoading">
  <form nz-form [formGroup]="validateForm">
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="houseName">{{l('warehousing_company_name')}}
      </nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="houseName" id="houseName" [(ngModel)]="warnHouse.houseName">
        <nz-form-explain *ngIf="validateForm.get('houseName').errors">{{l('please_enter_warehousing_company_name')}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <!-- <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="address">{{l('warehousing_company_address')}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="address" id="address" [(ngModel)]="warnHouse.address">
        <nz-form-explain *ngIf="validateForm.get('address').errors">{{please_enter_warehousing_company_address}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="lng">{{l('longitude')}}</nz-form-label>
      <nz-form-control>
        <nz-input-number [(ngModel)]="warnHouse.lng" formControlName="lng" [nzStep]="1"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('lng').errors">{{l('please_enter_longitude')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="lat">{{l('latitude')}}</nz-form-label>
      <nz-form-control>
        <nz-input-number [(ngModel)]="warnHouse.lat" formControlName="lat" [nzStep]="1"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('lat').errors">{{l('please_enter_latitude')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="radius">{{l('radius')}}</nz-form-label>
      <nz-form-control>
        <nz-input-number [(ngModel)]="warnHouse.radius" formControlName="radius" [nzMin]="1"
                         [nzStep]="1"></nz-input-number>
        <nz-form-explain *ngIf="validateForm.get('radius').errors">{{l('please_enter_radius')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item> -->
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="siteId">{{l('site_alone')}}</nz-form-label>
      <nz-form-control>
        <nz-select formControlName="siteId" [(ngModel)]="warnHouse.siteId">
          <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
        </nz-select>
        <nz-form-explain *ngIf="validateForm.get('siteId').errors">{{l('please_select_site')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="managerName">{{l("warehousing_company_manager")}}
      </nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="managerName" id="managerName" [(ngModel)]="warnHouse.managerName">
        <nz-form-explain *ngIf="validateForm.get('managerName').errors">
          {{l('please_enter_warehousing_company_manager')}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzRequired nzFor="managerPhone">{{l("manager_phone")}}</nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="managerPhone" id="managerPhone" [(ngModel)]="warnHouse.managerPhone">
        <nz-form-explain *ngIf="validateForm.get('managerPhone').errors">{{l('please_enter_manager_phone')}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item nzFlex>
      <nz-form-label nzFor="roleId" nzRequired>{{l('warehousing_company_contact')}}
      </nz-form-label>
      <nz-form-control>
        <input nz-input formControlName="housePhone" id="housePhone" [(ngModel)]="warnHouse.housePhone">
        <nz-form-explain *ngIf="validateForm.get('housePhone').errors">{{l('please_enter_warehousing_company_contact')}}
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

  </form>
</nz-modal>

<app-map-circle-modal #mapCircleModal></app-map-circle-modal>
<app-set-warehouse-reason-modal #setWarhouseReasonkModal (modalSave)="load()"></app-set-warehouse-reason-modal>
